<style>
    body{
        font-size: 12px;
    }
    .bag{
        color: #fff;
        width: 4px;
        text-align: center;
    }
    .bag-1{
        background-color: #e74c3c;
    }
    .bag-2{
        background-color: #3498db;
    }
    .bag-3{
        background-color: #f39c12;
    }
    .bag-4{
        background-color: #18bc9c;
    }
    .bag-5{
        background-color: #605ca8;
    }
    .bag-6{
        background-color: #e74c3c;
    }
    .bag-7{
        background-color: #3498db;
    }
    .bag-8{
        background-color: #f39c12;
    }
    .bag-9{
        background-color: #18bc9c;
    }
    .bag-0{
        background-color: #605ca8;
    }
    .color-gray{
        color: #999999;
    }
    .margin-left{
        margin-left: 20px;
    }

</style>
<div class="panel panel-default panel-intro">
    <div class="panel-body">
        {volist name="list" id="item" key="key"}
        <table  class="table table-striped table-bordered table-hover table-nowrap">
            <tbody>
            <tr style="background-color: #fff ">
                <td rowspan="3" class="bag bag-{:substr($key,strlen($key)-1,strlen($key))}" style="text-align: center; vertical-align: middle;">
                    <div>包</div>
                    <div>裹</div>
                    <div class="text-center">{$key}</div>
                </td>
                <td style=" vertical-align: middle;">
                    包裹单号:<span class="color-gray">{$item.package_no}</span>
                    <span class="margin-left">
                        快递单号:
                        {if $item.express_no}
                            <span class="color-gray">{$item.express_no}({$item.express_name})</span>
                            {if $item.subscribe_status == 0}
                             <button class="btn btn-xs btn-info btn-subscribe" data-id="{$item.id}">订阅物流</button>
                            {/if}
                        {else /}
                            未填写
                        {/if}
                    </span>
                    <span class="margin-left">
                        状态:
                        <span class="label bag-{$item.status}">{$item.status_text}</span>

                    </span>
                    {if $item.express_no}
                    <span class="margin-left">
                        <button class="btn btn-xs btn-warning btn-invoice" data-id="{$item.id}">打印出库单</button>
                    </span>

                    <span class="margin-left">
                        <button class="btn btn-xs btn-primary btn-track" data-id="{$item.id}">查看物流轨迹</button>
                    </span>
                    {/if}

                </td>
            </tr>
            <tr>
                <td style="padding: 0">
                    <table class="table table-striped table-bordered table-hover table-nowrap" style="margin-bottom: 0px">
                        <thead>
                        <tr style="background-color: #F2F2F2">
                            <th style="text-align: center; vertical-align: middle;">
                                <div class="th-inner">编号</div>
                            </th>
                            <th style="text-align: center; vertical-align: middle;">
                                <div class="th-inner">商品</div>
                            </th>
                            <th style="text-align: center; vertical-align: middle;">
                                <div class="th-inner">品牌</div>
                            </th>
                            <th style="text-align: center; vertical-align: middle;">
                                <div class="th-inner">规格</div>
                            </th>
                            <th style="text-align: center; vertical-align: middle;">
                                <div class="th-inner">重量</div>
                            </th>

                            <th style="text-align: center; vertical-align: middle;">
                                <div class="th-inner">数量</div>
                            </th>
                            <th style="text-align: center; vertical-align: middle;">
                                <div class="th-inner">价格</div>
                            </th>

                        </tr>
                        </thead>
                        <tbody>
                        {volist name="item.goods" id="goods"}
                        <tr>
                            <td style="text-align: center; vertical-align: middle;">{$key+1}</td>
                            <td style="text-align: center; vertical-align: middle;">
                                <strong>{$goods.name}</strong>
                            </td>
                            <td style="text-align: center; vertical-align: middle;">{$goods.brand}</td>
                            <td style="text-align: center; vertical-align: middle;">{$goods.sku}</td>
                            <td style="text-align: center; vertical-align: middle;">{$goods.weight}g</td>
                            <td style="text-align: center; vertical-align: middle;">{$goods.number}</td>
                            <td style="text-align: center; vertical-align: middle;">{$goods.price}</td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </td>
            </tr>

            <tr style="background-color: #fff">
                <td style=" vertical-align: middle;">
                    地址信息:
                    <span class="color-gray">
                        {$item.address.province}{$item.address.city}{$item.address.area}{$item.address.address}
                    </span>
                    <span class="margin-left">{$item.address.name}身份证信息:
                            {$item.address.idcard}
                            <button class="btn btn-xs btn-default" data-tips-image="{$item.address.idcard_front}">身份证正面</button>
                            <button class="btn btn-xs btn-default" data-tips-image="{$item.address.idcard_reverse}">身份证反面</button>
                        </span>
                </td>
            </tr>
            </tbody>
        </table>
        {/volist}
    </div>
</div>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('快递公司')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select class="form-control" data-rule="required" name="row[express_com]" id="c-express_com">
                <option value="">请选择快递公司</option>
                {volist name='comList' id='list'}
                <option value="{$list.code}">{$list.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Express_no')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-express_no" data-rule="required" class="form-control" name="row[express_no]" type="text" value="{$row.express_no|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Delivery_price')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-delivery_price" data-rule="required" class="form-control" step="0.01" name="row[delivery_price]" type="number" value="{$row.delivery_price|htmlentities}">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('包裹重量')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-weight" data-rule="required" class="form-control" step="0.01" name="row[weight]" type="number" value="{$row.weight|htmlentities}">
                <span class="input-group-addon">Kg</span>
            </div>

        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
